<template>
    <div>
        <el-container class="bg-white" :style="{'height':h+'px'}">
            <el-header class="image-header">
                <el-button type="primary" size="small" @click="addimgClass">新增图片分类</el-button>
                <el-button type="warning" size="small" @click="addImages">上传图片</el-button>

            </el-header>
            <el-container>
                <el-aside width="200px" class="image-aside">
                    <imgagAside ref="imgAside" @change=change></imgagAside>
                </el-aside>
                <el-main class="image-main">
                    <imageMain ref="imageMainRef"></imageMain>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script setup>
import { ref } from 'vue'

import imgagAside from '@/components/Image/imageAside.vue'
import imageMain from '@/components/Image/imageMain.vue'
// 计算高度
const windowHeight = window.innerHeight || document.body.clientHeight
const h = windowHeight - 64 - 44 - 40

const imgAside = ref(null)

const imageMainRef = ref(null)


const addimgClass = () => {
    imgAside.value.addImageClass()
}
const change = (id) => {
    imageMainRef.value.loadData(id)
}

const addImages = (id) => {
    imageMainRef.value.addImages(id)
}
</script>

<style>
.image-header {
    border-bottom: 1px solid #eeeeee;
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
}

.image-aside {
    border-right: 1px solid #eeeeee;
    position: relative;
}

.image-main {
    position: relative;
}
</style>